<template>
    <div>
        <el-card>
            <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="100px">
              <el-form-item label="网关分组" prop="gatewayGroup">
                  <el-select v-model="queryParams.gatewayGroup" placeholder="网关分组" size="small">
                    <el-option v-for="item in groupList" :label="item.groupName" :key="item.groupId" :value="item.groupId"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="前端服务名" prop="service">
                  <el-input v-model="queryParams.service" placeholder="前端服务名" size="small"></el-input>
              </el-form-item>
              <el-form-item label="前端API路径" prop="path">
                  <el-input v-model="queryParams.path" placeholder="前端API路径" size="small"></el-input>
              </el-form-item>
               <el-form-item label="请求方法" prop="methodIds">
                  <el-select v-model="methodIds" multiple collapse-tags placeholder="请求方法" size="small">
                       <el-option v-for="item in methods" :label="item" :key="item" :value="item"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="插件" prop="pluginIds">
                  <el-select v-model="pluginIds" multiple collapse-tags placeholder="插件" size="small">
                    <el-option v-for="item in pluginList" :label="item.chnName" :key="item.id" :value="item.id"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="访问" prop="access">
                  <el-select v-model="queryParams.access" placeholder="访问" size="small">
                    <el-option label="允许" value="a"></el-option>
                    <el-option label="禁止" value="f"></el-option>
                  </el-select>
              </el-form-item>
               <el-form-item >
                  <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-delete" size="small" @click="resetQuery('queryParams')">清空</el-button>
              </el-form-item>
            </el-form>
            <el-row style="margin: 10px">
              <el-col :span="2">
                  <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
              </el-col>
            </el-row>
            <el-table :data="tableData" border style="width: 100%" size="small">
                <el-table-column type="index" label="#" width="50"></el-table-column>
                <el-table-column label="网关分组" prop="gatewayGroup">
                    <template slot-scope="{row}">
                        {{row.gatewayGroup|groupFilter}}
                    </template>
                </el-table-column>
                <el-table-column label="路由类型" prop="proxyMode">
                    <template slot-scope="{row}">
                        {{row.proxyMode|proxyFilter}}
                    </template>
                </el-table-column>
                <el-table-column label="是否专线路由" prop="isDedicatedLine">
                    <template slot-scope="{row}">
                        {{row.isDedicatedLine|dedicatedFilter}}
                    </template>
                </el-table-column>
                <el-table-column label="前端服务名" prop="backendService"></el-table-column>
                <el-table-column label="前端API路径" prop="path"></el-table-column>
                <el-table-column label="请求方法" prop="method"></el-table-column>
                <el-table-column label="插件" prop="pluginNames" width="300">
                    <template slot-scope="scope">
                        <el-tooltip :content="scope.row.pluginNames" placement="top">
                            <div style="
                                display: inline-block;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                width: 100%;
                            "
                            >
                                {{scope.row.pluginNames}}
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="访问" prop="access">
                    <template slot-scope="{row}">
                        {{row.access|accessFilter}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-show="total>0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page="1"
                :page-sizes="[10, 20, 30, 40,50,100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                class="pagination-container"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getProxyList,getGroupeDict,getPluginDict,remove } from '@/api/getway/gateway.api.js'
    export default {
        data() {
            return {
                 // 表格数据
                tableData: [],
                 // 总条数
                total: 0,
                // 搜索参数
                queryParams: {
                    current: 1,
                    size: 10,
                    gatewayGroup: undefined,
                    service: undefined,
                    path: undefined,
                    method_in: undefined,
                    pluginId_in: undefined,
                    access: undefined
                },
                pluginIds: undefined,
                methodIds: undefined,
                groupList: [],
                pluginList: [],
                // 请求方法
                methods: ['GET','POST','PUT','DELETE','PATCH','HEAD','OPTIONS','TRACE']
            }
        },
        mounted() {
          this.getList();
          this.getGroupList();
          this.getPluginList();
        },
        methods: {
            getList() {
                if(this.pluginIds.length>0) {
                    this.queryParams.pluginId_in = this.pluginIds.join(',')
                }
                if(this.methodIds.length>0) {
                   this.queryParams.method_in = this.methodIds.join(',');
                }
                 getProxyList(this.queryParams).then(res=>{
                    if(res.code === 200) {
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            // 网关分组字典
            async getGroupList() {
                const result = await getGroupeDict()
                if(result.code === 200) {
                    this.groupList = result.data;
                }
            },
            // 插件字典
            async getPluginList() {
                const result = await getPluginDict()
                if(result.code === 200) {
                    this.pluginList = result.data;
                }
            },
            handleAdd() {
                this.$router.push('/proxy/api/add')
            },
            // 搜索
            handleQuery() {
                this.queryParams.current = 1;
                this.getList();
            },
            // 清空
            resetQuery(formName) {
                this.$refs[formName].resetFields();
                this.getList();
            },
            handleEdit(row) {
                 this.$router.push({
                    path: '/proxy/api/edit',
                    query: {
                        originId: row.id,
                        mode: 'edit'
                    }
                })
            },
            handleView(row) {
                this.$router.push({
                    path: '/proxy/api/view',
                    query: {
                        originId: row.id,
                        mode: 'view'
                    }
                })
            },
            handleDelete(id) {
                this.$confirm('确定将选择的数据删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const result = await remove(id);
                    if(result.code === 200) {
                            this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList();
                    }else {
                        this.$message.error(result.data.msg);
                    }
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            },
            handleSizeChange(val) {
                this.queryParams.size = val;
                this.getList();
           },
            handleCurrentChange(val) {
                this.queryParams.current = val;
                this.getList();
            }
        },
        filters: {
            // 网关分组
            groupFilter(value) {
                return value==='defalut'?'默认分组':value
            },
            // 路由类型
            proxyFilter(value) {
                if(value===1) {
                    return '服务编排'
                }else if(value===2) {
                    return '服务发现'
                }else if(value===3) {
                    return '反向代理'
                }
            },
            // 是否专线路由
            dedicatedFilter(value) {
                return value===0?'否':'是'
            },
            // 访问
            accessFilter(value) {
                return value==='a'?'允许':'禁止'
            }
        }
        
    }

</script>

<style lang="scss" scoped>
.pagination-container {
    padding: 10px;
    text-align: right;
}
</style>